<template>
  <div class="item" v-if="item">
    <header class="header">
      <div class="left">
        <div class="img-box">
          <img :src="item?.r.a?.p" alt="" />
        </div>
        <div class="autor">{{ item?.r.a?.n }}</div>
        <div class="lv">Lv.{{ item?.r.a?.lvl }}</div>
      </div>
      <div class="right" @click.stop="$toast(api.msg)">
        <svg
          t="1675680491901"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6386"
          width="16"
          height="16"
        >
          <path
            d="M188.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
            fill="#2a2a2a"
            p-id="6387"
          ></path>
          <path
            d="M516.2 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
            fill="#2a2a2a"
            p-id="6388"
          ></path>
          <path
            d="M836.5 507.2m-91.5 0a91.5 91.5 0 1 0 183 0 91.5 91.5 0 1 0-183 0Z"
            fill="#2a2a2a"
            p-id="6389"
          ></path>
        </svg>
      </div>
    </header>
    <div class="big-img" @click="toDetail">
      <img :src="item.r.img" v-if="!item.r.vu" alt="" />
      <video :src="item?.r.vu" controls v-else></video>
    </div>
    <div class="collection">
      <div
        class="img-box"
        v-for="(user, index) in item?.r.collect_users.slice(0, 4)"
        :key="index"
      >
        <img :src="user?.p" alt="" />
      </div>
      <div class="count">{{ item?.r.collect_count_text }}</div>
      <!-- <div style="margin-left:-0.1rem;" v-if="!item?.r.collect_users?.length&&!isPayRec">暂无人收藏</div> -->
      <div class="svg" :class="{ active: isPayRec }" @click.stop="payRecpie">
        <svg
          t="1675681551685"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7417"
          width="16"
          height="16"
        >
          <path
            d="M509.606998 143.114488c9.082866 0 17.327644 4.840238 20.996197 12.331863l97.262184 197.441814c5.613858 11.403724 16.663518 19.358907 29.438473 21.216207l223.738737 32.552393c8.420787 1.215688 15.604396 6.851035 18.23327 14.254655 2.520403 7.18361 0.595564 15.062044-5.084808 20.586874L730.253304 601.611947c-8.949836 8.751315-12.994965 21.171182-10.916631 33.370015l38.011732 222.060515c1.325182 7.737218-2.165316 15.426341-8.905834 19.978007-4.088108 2.741437-8.861832 4.155646-13.812587 4.155646-4.022617 0-7.999185-0.972141-11.425214-2.740414L528.149307 775.671215c-5.768377-3.006474-12.155854-4.552689-18.542308-4.552689-6.364965 0-12.727882 1.547239-18.518772 4.552689L296.254819 878.348736c-3.559059 1.855254-7.602142 2.828418-11.668761 2.828418-4.861728 0-9.723455-1.459235-13.546527-4.022617-6.961552-4.684696-10.475586-12.419867-9.127891-20.155039l38.011732-222.016513c2.078335-12.198833-1.988284-24.619724-10.939143-33.370015L125.02397 441.443038c-5.635347-5.492084-7.55814-13.348006-5.061272-20.453844 2.63092-7.481392 9.812483-13.116739 18.298761-14.332427l223.674269-32.552393c12.839423-1.857301 23.867594-9.813506 29.481452-21.216207l97.194646-197.396789C492.325403 147.965983 500.590648 143.114488 509.606998 143.114488M509.606998 104.904235c-24.043602 0-45.922912 13.226233-56.177464 33.95637L356.189863 336.302419l-223.674269 32.54216c-22.983457 3.304256-42.100864 18.718317-49.481971 39.659255-7.381108 21.048385-1.812275 44.23241 14.431687 60.033281l163.916257 160.125931-38.011732 222.016513c-3.868097 22.408359 6.03239 44.819788 25.458835 57.94676 10.69662 7.116071 23.204491 10.784624 35.757388 10.784624 10.298554 0 20.663622-2.475378 30.055526-7.337105l194.987926-102.7205L704.662463 912.072815c9.369392 4.861728 19.712971 7.337105 29.990035 7.337105 12.57541 0 25.082258-3.668553 35.778878-10.784624 19.426445-13.126972 29.305443-35.538401 25.460882-57.94676l-38.012755-222.016513 163.937746-160.125931c16.22145-15.812127 21.810748-38.984896 14.408151-60.033281-7.402597-20.940938-26.51898-36.353976-49.503461-39.659255L663.04767 336.302419l-97.240695-197.441814C555.619962 118.131491 533.695626 104.904235 509.606998 104.904235L509.606998 104.904235z"
            fill="#151515"
            p-id="7418"
          ></path>
        </svg>
      </div>
    </div>
    <div class="comment">{{ item.r.n }}</div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  data: () => {
    return {
      isPayRec: false,
    };
  },
  methods: {
    payRecpie() {
      console.log(111);
      this.api.payRecpie(this.item, this.isPayRec);
      this.isPayRec = !this.isPayRec;
      this.$toast.success("操作成功");
    },
    toDetail() {
      console.log(this.item.r);
      this.$router.push({
        name: "fooddetail",
        params: {
          foodid: this.item.r.id,
        },
      });
    },
  },
  created() {
    this.isPayRec =
      JSON.parse(localStorage.getItem("recpieList"))?.some(
        (rec) => rec.r.id == this.item.r.id
      ) || false;
    // console.log(this.item);
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  color: var(--text-black);
  .header {
    padding: 0.12rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      flex-grow: 1;
      display: flex;
      align-items: center;
      > div {
        margin-right: 0.1rem;
      }
      .img-box {
        width: 0.34rem;
        height: 0.34rem;
        border-radius: 0.17rem;
        overflow: hidden;
      }
      .autor {
        font-size: 0.16rem;
      }
      .lv {
        font-size: 0.12rem;
        line-height: 0.12rem;
        color: var(--text-lv);
      }
    }
    .right {
      width: 0.3rem;
      min-width: 0.3rem;
      height: 0.25rem;
    }
  }
  .big-img {
    position: relative;
    width: 100%;
    min-height: 2rem;
    animation: unfold 2s linear forwards;
    &::after {
      content: "";
      width: 100%;
      height: 80%;
      left: 0;
      top: 0;
      position: absolute;
      background-color: transparent;
      z-index: 1;
    }
  }
  .collection {
    display: flex;
    align-items: center;
    padding: 0.12rem;
    width: 100%;
    box-sizing: border-box;
    .img-box {
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 0.1rem;
      overflow: hidden;
      margin-left: -0.05rem;
    }
    .count {
      margin-left: 0.1rem;
    }
    .svg {
      width: 0.25rem;
      height: 0.25rem;
      margin-right: 0;
      margin-left: auto;
    }
    .active {
      svg,
      path {
        fill: var(--bgc-yellow);
      }
    }
  }
  .comment {
    width: 100%;
    padding: 0.1rem;
    box-sizing: border-box;
  }
}
</style>